<template>
  <div class="container">
    <div class="top-tooltip">
      <data-tabs :option="easyDataOption"></data-tabs>
    </div>
    <div class="right-tooltip">
      <div class="record-title">实时报警提示</div>
      <div v-for="alarmRecord in deviceAlarmRecords" :key="alarmRecord.id" class="record-item">
        <div>{{alarmRecord.deviceNo}}</div>
        <div>{{alarmRecord.reason}}</div>
      </div>
    </div>

    <baidu-map
      class="bm-view"
      :center="center"
      :zoom="zoom"
      :scroll-wheel-zoom="scrollWheelZoom"
      @ready="handler"
      ak="5Yd8UHfgG1ZSCQmq5h7y7eitGKgtdwfH"
    >
      <bm-marker
        v-for="point in points"
        :key="point.id"
        :position="point.position"
        :dragging="true"
        @click="infoWindowOpen(point.id)"
      >
        <bm-label
          :content="point.name"
          :labelStyle="{color: 'red', fontSize : '22px'}"
          :offset="{width: -35, height: 30}"
        />
        <bm-info-window
          :show="point.show"
          :position="point.position"
          @close="infoWindowClose(point.id)"
          @open="infoWindowOpen(point.id)"
        >
          <div class="text-wrapper">
            {{point.detail}}
            <el-switch
              v-model="point.status"
              @change="toggleStatus(point.id)"
              active-color="#13ce66"
              active-text="开"
              inactive-color="#ff4949"
              inactive-text="关"
            ></el-switch>
          </div>
        </bm-info-window>
      </bm-marker>
    </baidu-map>
  </div>
</template>

<script>
import BaiduMap from "vue-baidu-map/components/map/Map.vue";
import BmMarker from "vue-baidu-map/components/overlays/Marker.vue";
import BmInfoWindow from "vue-baidu-map/components/overlays/InfoWindow.vue";
import BmLabel from "vue-baidu-map/components/overlays/Label.vue";

import dataTabs from "@/components/data-tabs";

export default {
  data() {
    return {
      center: { lng: 0, lat: 0 },
      zoom: 3,
      scrollWheelZoom: true,
      points: [],
      deviceAlarmRecords: [],
      easyDataOption: {
        span: 6,
        data: [
          {
            title: "开启",
            subtitle: "实时",
            count: 7993,
            allcount: 10222,
            text: "路灯总数",
            color: "#FFA500",
            key: "开"
          },
          {
            title: "关闭",
            subtitle: "实时",
            count: 3112,
            allcount: 10222,
            text: "路灯总数",
            color: "#636363",
            key: "关"
          },
          {
            title: "正常",
            subtitle: "实时",
            count: 908,
            allcount: 10222,
            text: "路灯总数",
            color: "#00CD66",
            key: "好"
          },
          {
            title: "损坏",
            subtitle: "实时",
            count: 308,
            allcount: 10222,
            text: "路灯总数",
            color: "#CD5555",
            key: "坏"
          }
        ]
      }
    };
  },
  components: {
    BaiduMap,
    BmMarker,
    BmInfoWindow,
    BmLabel,
    dataTabs
  },
  methods: {
    // 获取渠道列表
    getDevices() {
      this.$http
        .get(`/business/device/list`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }

          for (let device of res.data) {
            let statusStr = device.status == 1 ? "开启" : "关闭";
            let status = device.status == 1 ? true : false;

            let temp = {
              id: device.id,
              name: device.deviceNo,
              detail: `路灯信息 运行状态：` + statusStr,
              address: device.position,
              position: { lng: device.coordinateX, lat: device.coordinateY },
              status: status,
              show: false
            };
            this.points.push(temp);
          }
        })
        .catch(() => {});
    },
    handler({ BMap, map }) {
      //console.log(BMap, map)
      this.center.lng = 114.428106;
      this.center.lat = 30.522046;
      this.zoom = 15;
    },
    infoWindowClose(id) {
      for (let point of this.points) {
        if (point.id == id) {
          point.show = false;
        }
      }
    },
    infoWindowOpen(id) {
      for (let point of this.points) {
        if (point.id == id) {
          point.show = true;
        }
      }
    },
    toggleStatus(id) {
      //console.log(id)
      for (let point of this.points) {
        if (point.id == id) {
          // point.status = !point.status;
          let statusStr = point.status == true ? "开启" : "关闭";
          point.detail = `路灯信息 运行状态：` + statusStr;

          let status = point.status == true ? 1 : 0;
          this.saveStatus({ id: id, status: status });

          let record = {
            deviceNo: point.name,
            position: point.address,
            operation: statusStr
          };
          this.saveOperationRecord(record);
          break;
        }
      }
    },

    saveStatus(operation) {
      this.$http["put"]("/business/device/", operation)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.$message({
            message: this.$t("prompt.success"),
            type: "success",
            duration: 500,
            onClose: () => {
              //this.visible = false;
            }
          });
        })
        .catch(() => {});
    },
    saveOperationRecord(record) {
      this.$http["post"]("/business/cfactivechannel/", record)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.$message({
            message: this.$t("prompt.success"),
            type: "success",
            duration: 500,
            onClose: () => {
              //this.visible = false
            }
          });
        })
        .catch(() => {});
    },
    //获取告警记录
    getDeviceAlarmRecordList() {
      this.$http
        .get("/business/deviceAlarmRecord/page", {
          params: {
            page: 1,
            limit: 3
          }
        })
        .then(({ data: res }) => {
          if (res.code == 0) {
            this.deviceAlarmRecords = res.data.list;
          }
        })
        .catch(() => {});
    }
  },
  created() {
    this.getDevices();
    this.getDeviceAlarmRecordList();
  }
};
</script>

<style>
.container {
  position: relative;
}

.bm-view {
  width: 100%;
  height: 900px;
}
.text-wrapper {
  white-space: pre-wrap;
}

.top-tooltip {
  width: 600px;
  height: 100px;
  top: 0px;
  left: 0px;
  position: absolute;
  z-index: 2;
}

.right-tooltip {
  width: 150px;
  height: 200px;
  top: 250px;
  right: 0px;
  position: fixed;
  padding: 0 10px;
  border-radius: 5px;
  color: brown;
  background-color: #fff;
  z-index: 2;
}

.record-title{
  margin-top: 10px;
  padding: 5px;
  background-color:  brown;
  color: #fff;
}

.record-item {
  padding-top: 10px;
}
</style>
